<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { SceneBasic } from '../js/scene-basic'
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {
    const sceneBasic = new SceneBasic()
    //导入纹理
    const textureLoader = new THREE.TextureLoader()
    const img = require('./static/vr-3.png')
    const logo = textureLoader.load(img)
    const aplha = textureLoader.load(img)
    //设置纹理偏移
    logo.offset.x = 0
    logo.offset.y = 0
    //设置纹理旋转
    logo.rotation = 0
    //设置旋转的中心角度
    logo.center.set(0, 0)
    //设置纹理重复
    logo.repeat.set(1, 1)
    //设置重复模式
    logo.wrapS = THREE.RepeatWrapping
    logo.wrapT = THREE.RepeatWrapping
    //纹理显示设置
    logo.minFilter = THREE.NearestFilter
    logo.magFilter = THREE.NearestFilter
    //添加物体
    const sphereGeometry = new THREE.SphereGeometry(100, 100, 100)
    //对球形几何网格进行x轴反转，使所有的面点向内，否则就是朝外
    // sphereGeometry.scale(-1, 1, 1)
    const basicMaterial = new THREE.MeshPhongMaterial({
      map: logo,
    })
    //双面材质
    basicMaterial.side = THREE.DoubleSide
    const sphere = new THREE.Mesh(sphereGeometry, basicMaterial)

    //修改相机位置，放到物体内部
    sceneBasic.camera.position.set(300, 0, 0)
    //添加光源
    /*
    THREE.AmbientLight	这是一个基本光源，该光源的颜色将会叠加到场景现有物体的颜色上。
    THREE.PointLight	这是一个点光源，从空间的一点向所有方向发射光线，点光源无法创建阴影。
    THREE.SpotLight	这是聚光灯，类似于台灯、吊灯或者手电筒，该光源可以产生阴影。
    THREE.DirectionalLight	该光源被称之为无限光，该光源的光线是平行的，例如，太阳光线，，该光源可以产生阴影。
    */
    const point = new THREE.AmbientLight(0xfefefe)
    point.position.set(0, 200, 200)
    sceneBasic.scene.add(point)

    //清除坐标轴
    sceneBasic.scene.remove(sceneBasic.axes)

    sceneBasic.scene.add(sphere)
    sceneBasic.render()
  },
}
</script>

<style></style>
